import React from "react"
import Admin from "../../../layout/Admin";
import PlanModel from "../../../model/plan";
import {Button, Input, Modal, PageHeader, Popover, Radio, Select, Table} from "antd";
import moment from "moment";
import PaginationFooter from "../../../component/PaginationFooter/PaginationFooter";
import Info from "../../../service/info";

class PlanApply extends React.Component {

    constructor(props) {
        super(props)
        this.model = new PlanModel()
        this.state = {
            list: [],
            p: 0,
            flag: 0,
            pro: null,
            plans: [],
            plansFlag: 1,
            plansP: 0,
            plansModal: false,
            nickname: '',
            matchname: '',
        }
    }

    componentDidMount() {
        this.allApply()
    }

    allApply() {
        const Limit = 10
        const Offset = this.state.p * Limit
        const Flag = this.state.flag
        this.model.allApply({
            Limit,
            Offset,
            Flag
        }).then((resp) => {
            const list = resp.data.ok
            if (list) {
                this.setState({
                    list,
                })
            }
        })
    }

    getPlans() {
        const params = {
            Flag: this.state.plansFlag,
            P: this.state.plansP,
        }
        if (this.state.pro) {
            params.Uid = this.state.pro.Uid
        }

        if (this.state.matchname.length > 0) {
            params.Matchname = this.state.matchname
        }
        if (this.state.nickname.length > 0) {
            params.Nickname = this.state.nickname
        }
        this.model.getPlans(params).then((resp) => {
            const plans = resp.data.ok
            if (plans) {
                this.setState({plans,})
            }
        })
    }

    review(user, result) {
        const Speid = user.Id
        const Uid = user.Uid
        this.model
            .review({
                Speid,
                Uid,
                Result: result,
            })
            .then((resp) => {
                if (resp.data.ok === 1) {
                    this.allApply()
                }
            })
    }

    approveApply(user) {
        this.review(user, 1)
        // Speid  int     //专家申请单id
        // Uid    string  //用户id
        // Result int    //1=通过，0=不通过

    }

    rejectApply(user) {
        this.review(user, 0)
    }
    hidePro(plan) {
        // Schemeid int `binding:"required"`
        // Flag     int //1=显示,4=隐藏
        this.model
            .hide({
                Schemeid: plan.Id,
                Flag: plan.Isdelete === 1 ? 4 : 1,
            })
            .then((resp) => {
                if (resp.data.ok === 1) {
                    Info.success('更改成功')
                    this.getPlans()
                }
            })
    }

    prevPage = () => {

        const p = this.state.p - 1
        this.setState({
            p,
        }, () => this.allApply())
    }

    nextPage = () => {

        const p = this.state.p + 1
        this.setState({
            p,
        }, () => this.allApply())
    }

    prevPlansPage = () => {

        const p = this.state.plansP - 1
        this.setState({
            plansP: p,
        }, () => this.getPlans())
    }

    nextPlansPage = () => {

        const p = this.state.plansP + 1
        this.setState({
            plansP: p,
        }, () => this.getPlans())
    }



    render() {
        const list = this.state.list
        const timeRender = (time) => moment(new Date(time * 1000)).format('YYYY年MM月DD月 HH:mm ')
        const quizRender = (quiz) => {
            if (quiz) {
                let result = <div>
                    {Object.entries(quiz).map(([id, answer,]) => {
                        return <span key={id} style={{marginRight: '8px',}}>
                            {id}: {answer}
                        </span>
                    })}
                </div>
                return result
            }

            // return result
        }

        const columns = [

            // Answer: {1: 1}
            // 1: 1
            // Createt: 1601278859
            // Flag: 0
            // Id: 16
            // Idnumber: "350212199212171512"
            // Realname: "郑克宇"
            // Uid: "6651b5fa-1ae5-44a8-
            // {
            //     title: 'Uid',
            //     dataIndex: 'Uid',
            // },
            {
                title: '实名',
                dataIndex: 'Realname',
            },
            {
                title: '证件',
                dataIndex: 'Idnumber',
            },

            {
                title: '申请时间',
                dataIndex: 'Createt',
                render: timeRender
            },


            {
                title: '答题结果',
                dataIndex: 'Answer',
                render: quizRender
            },

            {
                title: '审核状态',
                dataIndex: 'Flag',
                render: (text) => {
                    if (text === 0) return '未通过'
                    if (text === 1) return '审核通过'
                    if (text === 3) return '正在审批'
                }
            },

            {
                title: '操作',
                render: (text, record) => {
                    return <div>
                        {record.Flag === 3
                            ? <>
                                <a
                                    style={{marginRight: '16px',}}
                                    onClick={() => this.approveApply(record)}
                                >通过</a>
                                <a
                                    style={{marginRight: '16px',}}
                                    onClick={() => this.rejectApply(record)}
                                >拒绝</a>
                            </> : null
                        }
                        {record.Flag === 1 ? <a
                            style={{marginRight: '16px',}}
                            onClick={() => {
                                this.setState({
                                    plansModal: true,
                                    pro: record,
                                }, () => this.getPlans())

                            }}
                        >查看</a> : null}
                    </div>
                }
            },
        ]

        return <Admin>
            <Modal
                visible={this.state.plansModal}
                onCancel={() => this.setState({
                    plansModal: false,
                    plansP: 0,
                    pro: null,
                    nickname: '',
                    matchname: '',
                })}
                maskClosable
                width='80%'
            >
                <p>{this.state.matchname.length > 0 && `联赛: ${this.state.matchname}`}</p>
                <p>{this.state.nickname.length > 0 && `昵称: ${this.state.nickname}`}</p>
                <Radio.Group
                    onChange={(e) => {
                        const flag = e.target.value
                        this.setState({
                            plansFlag: flag,
                            plansP: 0,
                        }, () => this.getPlans())
                    }}
                    value={this.state.plansFlag}
                >
                    <Radio value={1}>免费</Radio>
                    <Radio value={2}>付费</Radio>
                    <Radio value={3}>时间</Radio>
                    <Radio value={4}>准确率</Radio>
                </Radio.Group>
                <Table
                    dataSource={this.state.plans}
                    // Avatar: "https://youtoball.oss-cn-shenzhen.aliyuncs.com/avatar/f575b213-0541-4418-9d3a-fadb7a1f98c6.jpg"
                    // Createt: 1605770341
                    // Giftorbuy: 0
                    // Goodat: ["总进球", "欧指"]
                    // Id: 5004319
                    // Isdelete: 1
                    // Matchname: ["乌兹超", "烏茲超", "UZB D1"]
                    // Name: "激情白鹿巷"
                    // Namiid: 3478075
                    // Price: 0
                    // Readnum: 0
                    // Reason: ""
                    // Reasontitle: ""
                    // Result: 1
                    // Rightrate: 100
                    // Rightratefloat: 0
                    // Rightratestr: ""
                    // Startt: 1605785400
                    // Uid: "f575b213-0541-4418-9d3a-fadb7a1f98c6"
                    // Yuce: [2.6, 3.25, 2.4]
                    // Yucestyle: "eu"
                    // Yucestyle2: "-1"
                    // Zannum: 0
                    columns={[
                        {
                            title: '专家昵称',
                            dataIndex: 'Name',
                        },
                        {
                            title: '比赛',
                            render: (_, record) => <span>{record.Matchname[0]}</span>
                        },
                        {
                            title: '比赛Id',
                            dataIndex: 'Namiid',
                        },
                        {
                            title: '方案Id',
                            dataIndex: 'Id',
                        },
                        {
                            title: '时间',
                            dataIndex: 'Createt',
                            render: (text) => <span>{moment(new Date(text * 1000)).format('YYYYMMDD-HH：mm')}</span>
                        },
                        {
                            title: '比赛时间',
                            dataIndex: 'Startt',
                            render: (text) => <span>{moment(new Date(text * 1000)).format('YYYYMMDD-HH：mm')}</span>
                        },
                        {
                            title: '打赏购买',
                            dataIndex: 'Giftorbuy',
                        },
                        {
                            title: '赞',
                            dataIndex: 'Zannum',
                        },
                        {
                            title: '类型',
                            dataIndex: 'Yucestyle',
                            // 预测类型(让球=asia，大小球=bs，胜平负=eu)
                            render: (text) => <span>{{'asia': '让球', 'bs': '大小球', 'eu': '胜平负',}[text]}</span>
                        },
                        {
                            title: '赔率',
                            dataIndex: 'Yuce',
                            render: (text) => <span>{text}</span>
                        },
                        {
                            title: '预测结果',
                            dataIndex: 'Result',
                            render: (text) => <span>{{
                                0: '未开赛',
                                1: '准',
                                2: '错',
                                3: '走',
                            }[text]}</span>
                        },
                        {
                            title: '历史准确率',
                            dataIndex: 'Rightratefloat',
                            render: (text) => <span>{text}%</span>
                        },
                        {
                            title: '理由',
                            render: (_, record) => {
                                const {
                                    Reasontitle,
                                    Reason,
                                } = record
                                const content = <div>
                                    <p>{Reasontitle}</p>
                                    <span>{Reason}</span>
                                </div>
                                return <Popover  content={content} title='理由详情'>
                                    <Button>详情</Button>
                                </Popover>
                            }
                        },
                        {
                            title: '操作',
                            render: (_, record) => {
                                return <a
                                    style={{marginRight: '16px',}}
                                    onClick={() => this.hidePro(record)}
                                >{record.Isdelete === 1 ? '隐藏' : '显示'}</a>
                            }
                        },
                    ]}
                    rowKey={(record, index) => index}
                    pagination={false}
                />
                <PaginationFooter
                    pageIndex={this.state.plansP}
                    prevPage={this.prevPlansPage}
                    nextPage={this.nextPlansPage}
                />
            </Modal>
            <div className="list-container">
                <PageHeader title='搜索方案' />

                <div style={{marginBottom: '16px',}}>
                    <Select
                        style={{marginRight: '16px',}}
                        value={this.state.plansFlag}
                        placeholder="方案类型"
                        onChange={(value) => {
                            this.setState({
                                plansFlag: value,
                                plansP: 0,
                            })
                        }}
                    >
                        <Select.Option value={1}>免费</Select.Option>
                        <Select.Option value={2}>付费</Select.Option>
                        <Select.Option value={3}>时间</Select.Option>
                        <Select.Option value={4}>准确率</Select.Option>
                    </Select>
                    <Input
                        value={this.state.matchname}
                        placeholder='联赛'
                        onChange={(e) => this.setState({matchname: e.target.value,})}
                        style={{width: '30%', marginRight: '16px',}}
                    />
                    <Input
                        value={this.state.nickname}
                        placeholder='昵称'
                        onChange={(e) => this.setState({nickname: e.target.value,})}
                        style={{width: '30%', marginRight: '16px',}}
                    />
                    <Button
                        onClick={() => {
                            this.setState({
                                plansModal: true,

                            }, () => this.getPlans())
                        }}
                    >搜索方案</Button>
                </div>

                <PageHeader title='专家名单' />

                <Radio.Group
                    onChange={(e) => {
                        const flag = e.target.value
                        this.setState({
                            flag,
                            p: 0,
                        }, () => this.allApply())
                    }}
                    value={this.state.flag}
                    style={{marginBottom: '16px',}}
                >
                    <Radio value={0}>所有</Radio>
                    <Radio value={1}>通过</Radio>
                    <Radio value={2}>未通过</Radio>
                    <Radio value={3}>未审核</Radio>
                </Radio.Group>


                <Table
                    dataSource={list}
                    columns={columns}
                    rowKey={(record, index) => index}
                    pagination={false}
                />
                <PaginationFooter
                    pageIndex={this.state.p}
                    prevPage={this.prevPage}
                    nextPage={this.nextPage}
                />
            </div>
        </Admin>
    }
}

export default PlanApply